<!-- 已有账号绑定手机组件 -->
<script name="CallbackBind" lang="ts" setup>
import { QQUserInfo, QQUserInfoRes } from '@/types/data'
import { useCountDown } from '@/utils/hooks'
import { ref } from 'vue'
import useStore from '@/store'
import { useRouter } from 'vue-router'
// (1) 导入，vee-validate实现一种通用的表单校验
import { useField, useForm } from 'vee-validate'
// 导入校验工具函数
import {
    mobileRule,
    codeRule
} from '@/utils/validate'
import Message from '@/components/XtxMessage'
const { user } = useStore()
const router = useRouter()
// (2) 传入规则调用 useForm方法，传入参数
const { validate, resetForm } = useForm({
    // 表单初始值，可以设置默认值
    initialValues: {
        mobile: '13666666666', // 手机号
        code: '123456', // 验证码
        // mobile: '', // 手机号
        // code: '', // 验证码
    },
    validationSchema: {
        // 手机号校验规则
        mobile: mobileRule,

        // 验证码校验规则
        code: codeRule,
    }
})
// 手机号登录
const { value: mobile, errorMessage: mobileErr, validate: mobileValidate } = useField<string>('mobile')
// 验证码
const { value: code, errorMessage: codeErr } = useField<string>('code')

const qqUserInfo = ref({} as QQUserInfo)
let openId = ''

// 获取QQ登录用户的信息
if (QC.Login.check()) {
    QC.api('get_user_info').success((res: QQUserInfoRes) => {
        qqUserInfo.value = res.data
    })
    // 3. 获取openId
    QC.Login.getMe((id) => {
        openId = id
        console.log(openId)
    })
}



// 定时器函数
const { time, start } = useCountDown()
// 15666666666
// 点了获取验证码
const send = async () => {
    // 当倒计时的时候, 无法点击再次获取验证码
    if (time.value > 0) return
    // 单独解构出的手机号校验
    const res = await mobileValidate()
    // 如果手机校验不通过的话, 无法请求验证码
    if (!res.valid) return
    await user.sendQQBindMsg(mobile.value)
    Message.success('发送验证码成功！')
    // 开启倒计时
    start()
}

// 点了立即绑定
const bind = async () => {
    // 兜底验证
    const res = await validate()
    if (!res.valid) return

    // 绑定请求
    await user.qqBindLogin(openId, mobile.value, code.value)
    // 如果ajax挂了将不会执行下面的代码
    Message.success('恭喜您, 绑定手机号成功 !')
    router.push('/')
}


</script>
<template>
    <div class="xtx-form">
        <div class="user-info">
            <img :src="qqUserInfo.figureurl_qq_1" alt="" />
            <p>Hi，<i>{{ qqUserInfo.nickname }}</i> 欢迎来小兔鲜，完成绑定后可以QQ账号一键登录哦~</p>
        </div>
        <div class="xtx-form-item">
            <div class="field">
                <i class="icon iconfont icon-phone"></i>
                <input v-model="mobile" class="input" type="text" placeholder="绑定的手机号" />
            </div>
            <!-- 手机号验证未通过显示 -->
            <div class="error" v-if="mobileErr">
                <i class="iconfont icon-warning" />{{ mobileErr }}
            </div>
        </div>
        <div class="xtx-form-item">
            <div class="field">
                <i class="icon iconfont icon-code"></i>
                <input v-model="code" class="input" type="text" placeholder="短信验证码" />
                <span class="code" @click="send">
                    {{ time === 0 ? '发送验证码' : `${time}s后发送` }}
                </span>
            </div>
            <!-- 验证码未通过显示 -->
            <div class="error" v-if="codeErr">
                <i class="iconfont icon-warning" />{{ codeErr }}
            </div>
        </div>
        <a @click="bind" href="javascript:;" class="submit">立即绑定</a>
    </div>
</template>

<style scoped lang="less">
.user-info {
    width: 320px;
    height: 70px;
    margin: 0 auto;
    display: flex;
    background: #f2f2f2;
    align-items: center;
    padding: 0 10px;
    margin-bottom: 25px;

    img {
        background: #f2f2f2;
        width: 50px;
        height: 50px;
    }

    p {
        padding-left: 10px;

        i {
            color: @xtxColor;
            font-size: 16px;
        }
    }
}

.code {
    position: absolute;
    right: 0;
    top: 0;
    line-height: 50px;
    width: 80px;
    color: #999;

    &:hover {
        cursor: pointer;
    }
}
</style>